<template>
  <base-view :model="query" @submit="search">
    <template v-slot:params>
      <a-col :span="8">
      <a-form-model-item label="产品状态">
        <a-select v-model="query.prodStatus" placeholder="请选择产品状态" allow-clear>
          <a-select-option value="00">非正式</a-select-option>
          <a-select-option value="01">正式</a-select-option>
          <a-select-option value="03">已注销</a-select-option>
        </a-select>
      </a-form-model-item>
      </a-col>
      <a-col :span="8">
      <a-form-model-item label="审核状态">
        <a-select v-model="query.auditStatus" placeholder="请选择审核状态" allow-clear>
          <a-select-option value="01">新增-审批流程中</a-select-option>
          <a-select-option value="02">新增-审核通过</a-select-option>
          <a-select-option value="03">新增-审核拒绝</a-select-option>
          <a-select-option value="11">注销-审批流程中</a-select-option>
          <a-select-option value="12">注销-审核通过</a-select-option>
          <a-select-option value="13">注销-审核拒绝</a-select-option>
        </a-select>
      </a-form-model-item>
      </a-col>
      <a-col :span="24">
      <a-form-model-item class="search">
        <a-button type="primary" html-type="submit">搜索</a-button>
        <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
      </a-form-model-item>
      </a-col>
    </template>
    <div class="section">
      <div class="btn-group">
        <a-button type="primary" icon="plus" v-has-permission="['standardProducts:add']" @click="add()">新增</a-button>
      </div>
      <a-table ref="table" :columns="columns" :dataSource="dataSource" rowKey="id" :loading="loading" :pagination="pagination" @change="pageChange" @showSizeChange="pageChange">
        <template slot="operation" slot-scope="text, record">
          <a-icon v-hasPermission="['standardProducts:update']" type="setting" style="color: #4a9ff5" v-show="true" @click="edit(record)" title="修改"  v-if="record.prodStatus === '00' || record.prodStatus === '01'"/>
          <a-icon type="eye" theme="twoTone" twoToneColor="#4a9ff5" @click="view(record)" title="详情" v-has-permission="['standardProducts:info']"></a-icon>
          <a-icon type="delete" theme="twoTone" twoToneColor="#4a9ff5" @click="cancel(record)" title="注销" v-if="record.prodStatus === '01'" v-has-permission="['standardProducts:cancel']"></a-icon>
<!--
          <a-icon type="delete" theme="twoTone" twoToneColor="#4a9ff5" @click="stop(record)" title="停用" v-if="record.prodStatus === '01'" v-has-permission="['standardProducts:stop']"></a-icon>
          <a-icon type="delete" theme="twoTone" twoToneColor="#4a9ff5" @click="use(record)" title="启用" v-if="record.prodStatus === '01'" v-has-permission="['standardProducts:use']"></a-icon>
-->

          <a-badge status="warning" text="无权限" v-has-no-permission="['standardProducts:update','standardProducts:info','standardProducts:cancel']"></a-badge>
        </template>
      </a-table>
    </div>
    <a-modal :maskClosable="false" :footer="isHideFoot?null:undefined" v-model="modalVisible" :title="modalTitle" width="1200px" @ok="modalSubmit" :okText="okText">
      <standard-products-operation ref="modalForm" :query="query"></standard-products-operation>
    </a-modal>
  </base-view>
</template>

<script>
import StandardProductsOperation from './StandardProductsOperation'
export default {
  name: 'StandardProducts',
  components: {StandardProductsOperation},
  provide: function () {
    return {
      standardProductContext: this
    }
  },
  data: function () {
    return {
      beanInfo: {
        feeInputMode: '1'
      },
      modalVisible: false,
      isHideFoot: false,
      modalTitle: '',
      okText: '确定',
      modalName: '标准产品',
      operationType: 'view',
      query: {
        instId :''
      },
      loading: false,
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        pageNum: 1,
        pageSize: 10,
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      columns: [
        {
          title: '机构标识',
          dataIndex: 'instId'
        },
        {
          title: '产品编码',
          dataIndex: 'prodCode'
        },
        {
          title: '产品名称',
          dataIndex: 'prodName'
        },
        {
          title: '产品状态',
          dataIndex: 'prodStatus', // 00 ~ 03  非正式 正式 停用 已注销
          customRender(text) {
            return text ? ['非正式','正式','停用','已注销',][+text] : ''
          }
        },
        {
          title: '审核状态',
          dataIndex: 'auditStatus',
          customRender (text) {
            return text ? {
              '00': '待提交审批',
              '11': '注销待审核',
              '01': '新增-审批流程中',
              '12': '注销审核通过',
              '02': '新增审核通过',
              '13': '注销审核拒绝',
              '03': '新增审核拒绝',
              '41': '修改待审核',
              '42': '修改审核通过',
              '43': '修改审核拒绝',
            }[text] : ''
          }
        },
        {
          title: '操作',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      dataSource: [],
    }
  },
  methods: {
    async reset(){
      this.query = {instId:this.query.instId}
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      await this.search();
    },
    async search (e) {
      try {
        const res = await this.$get('/admin/mcmp/bProdInfo/list', {
          instId: this.query.instId,
          prodStatus: this.query.prodStatus,
          auditStatus: this.query.auditStatus,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize
        })
        this.dataSource = res.data.rows
        this.$set(this.pagination, 'total', +res.data.total)
      } catch (e) {
        console.error(e)
      }
    },
    openModal(type = 'add', beanInfo) {
      this.modalTitle = {add: `新增${this.modalName}`, edit: `编辑${this.modalName}`, view: `${this.modalName}详情`, stop: `${this.modalName}停用`, start: `${this.modalName}启用`, cancel: `注销${this.modalName}`}[type]
      this.modalVisible = true
      this.okText = {add: '保存', edit: '编辑', view: '关闭', stop: '停用', start: '启用', cancel: '注销'}[type]
      if(type === 'view'){
        this.isHideFoot = true
      }else{
        this.isHideFoot = false
      }
      this.$nextTick(() => {
        this.$refs.modalForm.operatorType = type
        this.$refs.modalForm.setBeanInfo(beanInfo)
        this.$refs.modalForm.resetFields()
      })
    },
    onSelectChange () {
    },
    add () {
      const item = {
        instId: this.query.instId,
      }
      this.openModal('add',item)
    },
    view (item) {
      this.openModal('view', item)
    },
    edit (item) {
      this.openModal('edit', item)
    },
/*    stop (item) {
      this.openModal('view', item)
    },
    use (item) {
      this.openModal('view', item)
    },*/
    cancel (item) {
      this.openModal('cancel', item)
    },
    pageChange(e) {
      this.pagination.pageNum = e.current;
      this.pagination.pageSize = e.pageSize;
      this.search();
      this.pagination.pageNum = this.defaultCurrent
    },
    async modalSubmit () {
      const res = await this.$refs.modalForm.submit()
      if (res) {
        this.modalVisible = false
        await this.search()
      }
    },
  }
}
</script>

<style scoped>
.page {
  width: 100%;
}

.section {
  background: #fff;
}

.form {
  text-align: center;
}
.select {
  width: 180px;
}

.btn-group {
  margin-bottom: 20px;
}
.subtitle{
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 0 10px;
}
</style>
